<template>
  <el-container v-loading="loading"><!--  功能按钮组 start  -->
    <el-header height="42px">
      <el-button-group class="ik-list-menu">
        <!-- 编辑模式  add - 新增模式, edit - 编辑模式, details - 详情模式 -->
        <el-button
          v-if="pageData.mode === 'edit' || pageData.mode === 'details'"
          class="ik-list-menu-btn"
          size="medium"
          @click="infoCreateBtn"
        >新增
        </el-button>
        <el-button
          v-if="pageData.mode === 'details'"
          class="ik-list-menu-btn"
          size="medium"
          @click="infoUpdateBtn"
        >修改
        </el-button>
        <el-button
          v-if="pageData.mode === 'edit' || pageData.mode === 'details'"
          class="ik-list-menu-btn"
          size="medium"
          @click="infoCopyBtn"
        >复制
        </el-button>
        <el-button
          v-if="pageData.mode === 'edit'"
          class="ik-list-menu-btn"
          size="medium"
          @click="infoDetailsBtn"
        >详情
        </el-button>
        <el-button
          v-if="pageData.mode === 'add' || pageData.mode === 'edit'"
          class="ik-list-menu-btn"
          size="medium"
          @click="infoSaveBtn"
        >
          保存
        </el-button>
        <el-button
          class="ik-list-menu-btn"
          size="medium"
          @click="infoCancelBtn"
        >取消
        </el-button>
      </el-button-group>
    </el-header>
    <!--  功能按钮组 end  -->
    <!--  表单区 start  -->
    <el-main>
      <h-form ref="form" />
      <d-table />
    </el-main>
    <!--  表单区 end  -->
  </el-container>
</template>
<script>
import DTable from "@/components/TkCommonPage/components/DTable.vue"
import HForm from "@/components/TkCommonPage/components/HForm.vue"

export default {
  name: "HdForm",
  components: { HForm, DTable },
  inject: ["pageData"],
  data() {
    return {
      // 页面loading
      loading: false
    }
  },
  methods: {
    /**
     * 信息页创建按钮点击
     */
    infoCreateBtn() {
      this.$router.push({ path: '/business/manager/' + this.pageData.webPath + '/info/add' })
    },
    /**
     * 信息页编辑按钮点击
     */
    infoUpdateBtn() {
      this.pageData.mode = "edit"
    },
    /**
     * 复制按钮点击事件
     */
    infoCopyBtn() {
      // 修改id为控制
      this.pageData.formData.head.id = 0
      // 修改为编辑模式
      this.pageData.mode = "edit"
    },
    /**
     * 详情按钮被点击
     */
    infoDetailsBtn() {
      // 修改为编辑模式
      this.pageData.mode = "details"
      this.$refs.form.get(this.pageData.formData.head.id)
    },
    /**
     * 保存按钮点击事件
     */
    infoSaveBtn() {
      this.$refs.form.saveOrUpdate()
      this.pageData.mode = "details"
    },
    /**
     * 取消按钮点击事件
     */
    infoCancelBtn() {
      this.$router.push({ path: '/business/manager/' + this.pageData.webPath + '/list/list' })
    },
    /**
     * 更新表单
     * @param key
     * @param value
     */
    updateFormData(key, value) {
      this.$refs.form.update(key, value)
    }
  }
}
</script>

<style scoped lang="scss">

@import "~@/styles/listinfo";

.data-directory-tabs-info {
  height: calc(100% - 60px);
}

.data-directory-tabs-info .el-tabs__content {
  height: calc(100% - 53px);
  overflow: auto;
  min-height: 350px;
}
</style>
